import React, { useRef, useState } from 'react';
import { TouchableOpacity, View } from 'react-native';
import MaterialIcons from 'react-native-vector-icons/MaterialIcons';
import { Tip, Dialog, Input } from 'beeshell';
import TaskListScreen from './TaskListScreen';
import genTabContainer from '../../utils/TabUtil';
import { sizes, colors } from '../../constants/theme';
import Http from '../../service/http';
import requestCheck from '../../utils/RequestCheckUtil';
import { getInfo } from '../../service/token';


const tabs = {
  Pending: {
    screen: ({ navigation }) => <TaskListScreen type="0" navigation={navigation} />,
    navigationOptions: {
      title: '排队中'
    }
  },
  Executing: {
    screen: ({ navigation }) => <TaskListScreen type="1" navigation={navigation} />,
    navigationOptions: {
      title: '正在执行'
    }
  },
  Done: {
    screen: ({ navigation }) => <TaskListScreen type="2" navigation={navigation} />,
    navigationOptions: {
      title: '已结束'
    }
  },
  Abnormal: {
    screen: ({ navigation }) => <TaskListScreen type="3" navigation={navigation} />,
    navigationOptions: {
      title: '异常'
    }
  },
};

function MsgFeedback({ navigation: { state: { params: { instanceId } } } }) {
  const dialog = useRef(null);
  const [input, setInput] = useState('');

  const feedback = () => {
    dialog.current.open();
  };

  const sendMsg = async () => {
    const { aud } = await getInfo();
    const res = await Http.sendToManager({
      from: aud,
      ecnId: instanceId,
      message: {
        content: input
      }
    });
    setInput('');
    const callback = () => {
      Tip.show('反馈成功');
    };
    requestCheck(res, callback);
  };

  return (
    <>
      <TouchableOpacity style={{ marginRight: sizes.base }} onPress={feedback}>
        <MaterialIcons name="feedback" color="white" size={26} />
      </TouchableOpacity>
      <Dialog
        ref={dialog}
        offsetY={-100}
        title="发送消息"
        body={(
          <View style={{ backgroundColor: '#fff', padding: 20 }}>
            <Input
              textAlign="left"
              style={{
                height: 100,
                borderColor: colors.gray,
                borderWidth: 1,
              }}
              multiline
              value={input}
              placeholder="请输入消息"
              onChange={(value) => { setInput(value); }}
            />
          </View>
          )}
        cancelable
        operationsLayout="row"
        operations={[
          {
            labelText: '取消',
            type: 'cancel',
            onPress: () => setInput('')
          },
          {
            labelText: '发送消息',
            type: 'confirm',
            onPress: sendMsg
          },
        ]}
      />
    </>
  );
}

const TabNavigator = genTabContainer(tabs);
TabNavigator.navigationOptions = ({ navigation }) => ({
  headerTitle: '工艺任务',
  headerRight: <MsgFeedback navigation={navigation} />
});
export default TabNavigator;
